﻿@model VOD.Models.Video
@{
    ViewBag.Title = "Step3";
}
<p>@Model.Name</p>
<h1>3.添加视频文件</h1>
@using (Html.BeginForm())
{
    @Html.HiddenFor(v=>v.VideoID)
    <a id="fileAdd" href="javascript:void(0);"><span>添加</span></a>
    <ul id="MovieList">
        tips:拖动调整顺序
        @*电影列表*@
    </ul>
    <p>
        <input id="btnSave" type="button" value="保存" />
        <input id="btnreset" type="button" value="重置" />
    </p>
    <input id="fileUrlList" name="fileUrlList" type="hidden" value="" />
}
<div id="Dialog" title="添加文件">
    <label for="集数" style="display: block; margin-top: 16px;">
        集数</label>
    <input id="fileNum" class="ui-widget-content ui-corner-all" style="padding: .4em;
        width: 40px;" type="text" value="" />
    <label for="文件地址" style="display: block; margin-top: 16px;">
        文件地址</label>
    <textarea id="fileUrl" class="ui-widget-content ui-corner-all" style="width: 100%;
        height: 100px"></textarea>
</div>

<script type="text/javascript">
    //把文件列表转换成json，然后保存在fileUrlList隐藏框内
    function fileListToJson() {
        var fileList = "[";
        var movieList = $("#MovieList");
        $.each(movieList.children("li"), function (n, value) {
            fileList += "{\"Num\":" + n + ",\"Url\":\"";
            fileList += $(value).children("i").html();
            fileList += "\"},"
        });
        fileList = fileList.substring(0, fileList.length - 1);
        fileList += "]}";
        $("#fileUrlList").attr("value", fileList);
    }
    //变换视频集顺序
    $("#MovieList").sortable({
        //延时0.1秒拖动
        delay: 100,
        //拖动时的空白处样式
        placeholder: "ui-state-highlight",
    });

    //初始化对话框
    $("#Dialog").dialog({
        autoOpen: false,
        width: 350,
        height: 300,
        resizable: false,
        modal: true,
        buttons: {
            "添加": function () {
                //获取li的个数
                var liCount = $("#fileNum").attr("value");
                var movieInfo = "<li class='ui-state-default ui-corner-all' title='" + $("#fileUrl").val() + "'><span class='ui-icon ui-icon-arrowthick-2-n-s'></span>第<b>" + liCount + "</b>集&nbsp;&nbsp;<i>" + $("#fileUrl").val() + "</i><a href='javascript:void(0);' class='btnRemove' role='button'><span class='ui-icon ui-icon-closethick'>删除</span></a></li>";
                //添加新内容
                $("#MovieList").append(movieInfo);
                //清空textarea
                $("#fileUrl").val("");
                $(this).dialog("close");
            },
            "取消": function () { $(this).dialog("close"); }
        }
    });

    //"添加视频文件"按钮绑定事件
    $("#fileAdd").button().click(function () {
        $("*").stop();
        $("#fileNum").attr("value", $("#MovieList").children("li").length + 1);
        $("#Dialog").dialog("open");
        $("#fileUrl").focus();
    });

    //“删除”按钮绑定事件
    $(".btnRemove").live("click", function (event) {
        $(event.target).parent().parent().remove();
    });

    //"保存"按钮绑定事件
    $("#btnSave").bind("click",function(){
        fileListToJson();
        $("form").submit();
    });

    //“重置”按钮绑定事件
    $("#btnreset").click(function () {
        $("#MovieList").html("tips:拖动调整顺序");
    });
</script>